<script setup lang="ts">
  defineProps<{
    title: string,
    price: string,
    pic: string,
    badge?: string,
    soldout?: boolean,
    ssr?: boolean,
    type?: string,
    final?: boolean,
    bottomText?: string,
	percent?: string,
	stock?:string,
	count?:string,
    emits: ['click']
  }>()
</script>

<template>
  <view class="product-item">
    <view v-if="badge" class="badge">
      <text>{{ badge }}</text>
    </view>


    <view class="img-wrapper" @click="$emit('click')">
      <view v-if="type" class="ssr-badge">
        <text>{{ type }}</text>
      </view>
      <image class="product-img" :src="pic" mode="widthFix" />
      <view v-if="soldout" class="soldout-mask"></view>
      <view v-if="final" class="final-mask"></view>
      <text v-if="bottomText" class="bottom-text">{{ bottomText }}</text>
    </view>
	<text class="title">{{ title }}</text>
	<view v-if="count" style="display: flex;justify-content: space-between;">
		<text class="price" >{{ stock +"/"+count}}</text>
	</view>
	<text class="price" v-else>{{ percent?"概率："+percent: price }}</text>
  </view>
</template>

<style scoped>
  .product-item {
    width: 100%;
    font-size: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
  }

  .product-item .ssr-badge {
    position: absolute;
    top: 10rpx;
    right: 8rpx;
    width: 50rpx;
    height: 22rpx;
    background: linear-gradient(90deg, #FFF7C2 0%, #FFD163 100%);
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: white;
    font-size: 16rpx;
    z-index: 0;
    color: #CB7621;
  }

  .product-item .badge {
    position: absolute;
    top: 8px;
    width: 46.34px;
    height: 16.8px;
    background-image: url('~@/static/product-item-badge-bg.png');
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: white;
    font-size: 12px;
    z-index: 1;
  }

  .product-item .img-wrapper {
    padding: 10px 8px;
    background-image: url('~@/static/owo/product-item-bg.png');
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    /* height: 100%; */
    /* min-width: 110px; */
    position: relative;
  }

  .product-item .product-img {
    width: 100%;
    height: 100%;
  }
  .product-item .soldout-mask {
    background-image: url('~@/static/owo/product-item-soldout.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
  }
  .product-item .final-mask {
	background-image: url('~@/static/owo/product-item-soldout.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
  .product-item .title {
    width: 100%;
    font-size: 9px;
    font-weight: 400;
    color: rgba(255, 238, 197, 1);
    text-align: left;
    overflow: hidden;
    height: 14px;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: PingFangSC-Regular, sans-serif;
  }

  .product-item .price {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #B0B0B0;
    text-align: left;
    vertical-align: top;
  }

  .bottom-text {
    color: white;
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    height: 18px;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    z-index: 0;
  }
</style>
